<template>
	<view class="wdthdrawal">
		<view class="pagetitle">
			<uni-breadcrumb separator="/">
				<uni-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to">
					{{route.name}}
				</uni-breadcrumb-item>
			</uni-breadcrumb>
		</view>
		
		<loading v-if="loading" ></loading>
		<view v-else class="table">
			<uni-table ref="table" :loading="loading"  :emptyText="data.length || '没有更多数据'" border stripe  @selection-change="selectionChange">
				<!-- 表头行 -->
				<uni-tr>
					<uni-th align="center" style="width:200px;">选项</uni-th>
					<uni-th>值</uni-th>
				</uni-tr>
				<uni-tr>
					<uni-td align="center" style="width:200px;">对方头像</uni-td>
					<uni-td>
						<image v-if="data.user.avatar" :src="data.user.avatar+'?x-oss-process=image/resize,m_fixed,h_100,w_100'" mode="widthFix" style="width:70rpx;" ></image>
					</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td align="center" style="width:200px;">对方昵称</uni-td>
					<uni-td>
						{{data.user.nickname}}
					</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td align="center" style="width:200px;">涉及金额</uni-td>
					<uni-td>
						<text class="fontColorApp">
							￥
							{{data.type==1?'+':'-'}}{{(data.price ?  data.price/100 :0   ).toFixed(2)}}
						</text>
					</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td align="center" style="width:200px;">账单说明</uni-td>
					<uni-td>
						<view style="display:flex;"  >
							<text>{{data.text}}</text>
							&nbsp;	&nbsp;	&nbsp;
							<navigator :url="`/pages/order/uni-pay-orders/detail?id=${data.order.order_no}`">
								<text class="underlineApp" >
									{{data.text=='订单收入'||data.text=='订单退款'?'相关订单':''}}
								</text>
							</navigator>
						</view>
					</uni-td>
				</uni-tr>
				
				
				<uni-tr v-if="data.bank" >
					<uni-td align="center" style="width:200px;">服务费</uni-td>
					<uni-td>
						<text class="fontColorApp" >
							￥{{data.bank.serve_money}}
						</text>
					</uni-td>
				</uni-tr>
				<uni-tr v-if="data.bank" >
					<uni-td align="center" style="width:200px;">提现银行</uni-td>
					<uni-td>
							{{onBankIs(data.bank.properties.bank_title)}}
					</uni-td>
				</uni-tr>
				<uni-tr v-if="data.bank" >
					<uni-td align="center" style="width:200px;">银行卡证号</uni-td>
					<uni-td>
						<text class="fontColorApp">
							{{bankCardsReconfiguration(data.bank.properties.bank_no)}}
						</text>
					</uni-td>
				</uni-tr>
				<uni-tr v-if="data.bank" >
					<uni-td align="center" style="width:200px;">开户人姓名</uni-td>
					<uni-td>
						<text class="">
							{{data.bank.properties.name}}
						</text>
					</uni-td>
				</uni-tr>
				<uni-tr v-if="data.bank" >
					<uni-td align="center" style="width:200px;">当前状态</uni-td>
					<uni-td   >
						<text :style="`color:${data.failure_note?'#ff3300':'#23bf00'}`" >
							{{data.is_settlement.is_true?'已汇款': data.failure_note?'汇款已拒绝':'待汇款'}}
						</text>
					</uni-td>
				</uni-tr>
				<uni-tr v-if="data.bank && data.failure_note" >
					<uni-td align="center" style="width:200px;">提现驳回</uni-td>
					<uni-td   >
						{{ data.failure_note? data.failure_note:''}}
					</uni-td>
				</uni-tr>
				<uni-tr  >
					<uni-td align="center" style="width:200px;">交易单号</uni-td>
					<uni-td   >
						{{data.order.order_no}}
					</uni-td>
				</uni-tr>
				
				
			</uni-table>
			
		</view>
		
	</view>
</template>

<script>
	import Util from "@/js_sdk/validator/util.js"
	const global = uniCloud.importObject("global",{customUI:true})
	const db = uniCloud.database()
	export default {
		data() {
			return {
				loading:true,
				routes: [
					{to: "/pages/index/index",name: "首页",},
					{to: "/pages/shop/shop/shop-info",name: "商铺信息" },
					{to: "/pages/shop/shop_bill/list",name: "商铺账单" },
					{to: "",name: "账单详情" }
				],
				data:[]
			}
		},
		onLoad(e) {
			// e._uid 必须是商铺id或者创建人id(用户表id)
			if (e._uid) {
				this.getData(e._uid)
			}else {
				return uni.showModal({
					title:"环境异常",
					content:"当前环境异常，请稍后重试",
					showCancel:false
				}).then(res=>{
					if (res.confirm) {
						uni.reLaunch({
							url:'/pages/index/index'
						})
					}
				})
				
			}
			
		},
		methods: {
			getData(_uid){
				let billField =  "_id,shop_id,order_no,failure_note,price,is_settlement,bank,order,text,user,is_account,is_settlement,type,create_date"
				db.collection("shop_bill" )
					.doc(_uid)
					.field(billField)
					.get({getOne:true,getCount:true,customUI:true})
				.then(res=>{
					this.data = res.result.data
					this.loading = false
				})
			},
			/**
			 * 获取指定日期的开始和结束时间戳
			 * @returns {Object} - 返回包含开始时间戳和结束时间戳的对象
			 */
			getStartAndEndTimestamp() {
				const date = new Date(); 
				const sevenDaysAgo = new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000);
				const startTime = sevenDaysAgo.setHours(0, 0, 0, 0); // 将指定日期设置为零点，返回开始时间戳
				const endTime = date.setHours(23, 59, 59, 999); // 将指定日期设置为当天的结束，返回结束时间戳
				return { startTime: startTime, endTime: endTime };
			},
			onBankIs(bank){
				if(typeof bank == 'string'){
					return bank
				}
				else if (typeof bank == 'object') {
					return bank[0].label
				}
			},
			// 银行卡重构
			bankCardsReconfiguration(bank_no){
				return 	Util.formatBankCardNumber(bank_no)
			},
			// 手机号重构
			rebornMobile(mobile){
				return 	Util.formatPhoneNumber(`${mobile}`)
			},
			goUrl(Url){
				uni.navigateTo({
					url:Url
				})
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.hoverBak{
	}
	.select{
		width:500rpx;
		margin:0 20rpx;
	}
	.pagetitle{
		padding:10rpx;
		display: flex; justify-content: space-between; align-items:center;
		.right{
			display:flex;
		}
	}
	.warn{
		padding:10rpx;
	}
	.item{
		padding:10rpx;
		margin:0rpx;
		border-bottom:1rpx solid #eee;
		display: flex; justify-content: space-between; align-items:center;
		.items{
			flex: 1;
			text-align: center;
		}
	}
	.title{
		font-size:16px;font-weight: bold;
	}
	.table{
		margin:50rpx 20rpx;
		border:1px solid #eee;
		border-bottom:none
	}
	.wdthdrawal{
		padding:20rpx;
		font-size:14px;
	}
</style>
